<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/任务六：通过HTML及CSS模拟报纸排版.css"/>
	</head>

	<body>
		<div class="warp">
			<div class="main">
				<div class="header">
					<div class="logo">
						<p>ife.baidu.com</p>
					</div>
					<div class="nav ">
						<p>2016.03</p>
					</div>
				</div>
				<div class="banner">
					<img src="img/banner.jpg" />
					<div class="leftColor">

					</div>
					<div class="rightColor">

					</div>
				</div>
				<div class="bannerInformation clearfix">
					<h2 class="caption">About Technologe</h2>
					<h3 class="technologe">About technologe about technologe  about technologe</h3>
					<h1 class="date">700</h1>
					<h3 class="num">3.2</h3>
					<h4><span>css</span>
						<br />
						cssssccsccscssc
					</h4>
				</div>
				<div style="clear: both;">
					
				</div>
				<div class="firstArticle">
					<h2>What</h2>
					<p>端前端前端端前端前端前端前端前端前端前 端前端前端前端前端前端前端前端端前端前 端端前端前端前端前端前端前端前端前端前 端前端前端前端前端前端端前端前端端前端 前端前端前端前端前端前端前端前端前端前</p>
				</div>
				<div class="secondArtcle">
					<h2>When</h2>
					<p>端前端前端端前端前端前端前端前端前 端前端前端前端前端前端前端前端前端 端前端前端端前端前端前端前端前端前 端前端前端前端前端前端前端前端前端 端前端前端端前端前端前端前端前端前 端前端前端前端前端</p>
				</div>
				<div class="threeArticle clearfix">
					<h2>How</h2>
					<p>前端前端端前端前端 前zhe端前端前端前端前端前 端前端前端端前</p>
					<br />
					<ul>
						<li>What-------- <span>40%</span></li>
						<li>What-------- <span>30%</span></li>
						<li>What-------- <span>30%</span></li>
					</ul>
				</div>
				<div style="clear: both;">
					
				</div>
				<div class="fourArticle">
					<h1><span>THE</span> TECHNOLOGE OF FRONT
					<h2>前端技术领域</h2>
					</h1>
					
					<p class="one">前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端</p>
					<img src="img/acticlePhoto.jpg"/>
					<p>端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端</p>
					<p>前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端</p>
					
				</div>
				<div class="photo">
					<img src="img/photo.jpg"/>
					<div class="cover">
						<div class="font">
							<p>前端技术<span>前端技术前端技术</span></p>
						</div>
					</div>
				</div>
				<div class="other">
					<div class="list">
						<ul>
							<li>前端前端前端前端前端前端.......................<span>前端</span></li>
							<li>前端 前端前端前端前端.....................<span>前端</span></li>
							<li>前端前 前端前端前端前端前端前端前端..<span>前端</span></li>
						</ul>
					</div>
					<div class="biao">
						<h1>0</h1>
						<p><span>ONE TWO
							<br />  THREE FORE FIVE</span>
							
							<br />
						hello world hello world hello world hello worldhello world</p>
					</div>
					<div style="clear: both;">
						
					</div>
					<div class="cite">
						<p><span>“</span>hello world hello world hell ohello world hello world hello world hello world hello world hello world<span>”</span></p>
					</div>
				</div>
				<div class="footer">
					<p>ife.baidu.com</p>
				</div>
			</div>
		</div>
	</body>

</html>